<script>
import Icon from '../Iconfont'

const urlMAp = {
  'qq': 'tencent://message/?Menu=yes&uin=',
  'qqSec': '&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45',
  'mail': 'mailto:'
}

export default {
  components: {
    Icon: Icon
  },
  name: 'contentItem',
  props: {
    // 类型
    type: {
      type: String,
      default: 'qq'
    },
    // 号码
    tel: {
      type: String,
      default: ''
    },
  },
  computed: {
    url() {
      let retUrl = ''
      if (this.type === 'qq') {
        retUrl = urlMAp.qq + this.tel + urlMAp.qqSec
      } else if (this.type === 'mail') {
        retUrl = urlMAp.mail + this.tel
      }
      return retUrl
    }
  }
}
</script>



<template>
  <a :href="url" class="contentItem-contaier">
    <Icon :type="type" />
    <span>{{ tel }}</span>
  </a>
</template>



<style lang='less' scoped>
@import '../../styles/var.less';

.contentItem-contaier {
  background-color: transparent;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 5px;
  margin-top: 5px;
  color: @lightWords;

  &:hover {
    color: @primary;
  }

  .iconfont {
    font-size: 25px;
    margin-right: 5px;
  }



  span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
  }
}
</style>